<div id="projectInfo" class="container-fluid">
	<div class="row-fluid">
		<div class="span3">
			<div class="page-header clearfix text-center">
				<a data-bind="attr: { href: '#users/' + owner.id() }">
					<img class="clearfix img-rounded" width="200" height="200" data-bind="attr: { src: owner.avatar }">
				</a>
				<hr>
				<h4>
					<a data-bind="text: owner.name, attr: { href: '#users/' + owner.id() }"></a>
				</h4>
				<p>
					<strong data-bind="text: owner.email"></strong>
				</p>
			</div>
			<p data-bind="text: owner.description"></p>
		</div>

		<div class="span9">
			<div class="page-header">
				<h2 data-bind="text: project.title()"></h2>
				<p data-bind="text: project.description"></p>
			</div>
			<!-- TASKS -->
			<div data-bind="visible: own() || participate()">
				<!-- ko stopBinding: true -->
				<div id="projectTasks" class="section" data-bind="with: tasks">
					<div class="page-header">
						<h4>
							<span>Tasks</span>
							<small>(<span data-bind="text: $data.length"></span>)</small>
							<button class="btn btn-mini btn-primary pull-right" type="button" href="#taskForm" data-toggle="modal">Add New</button>
						</h4>
					</div>

					<div data-bind="visible: $data.length !== 0">
						<table class="table table-striped table-condensed">
							<thead>
								<tr>
									<th>Title</th>
									<th>End Date</th>
									<th>Status</th>
									<th></th>                                          
								</tr>
							</thead>   
							<tbody data-bind="foreach: $data">
								<tr>
									<td><a data-bind="text: $data.title, attr: { href: '#projects/' + $data.project}"></a></td>
									<td data-bind="text: $root.getYMDTime($data.endDate)"></td>
									<td data-bind="with: $data.status">
										<span data-bind="visible: $data === 4" class="label label-success">Done</span>
										<span data-bind="visible: $data === 3" class="label label-warning">In Testing</span>
										<span data-bind="visible: $data === 2" class="label label-important">In Progress</span>
										<span data-bind="visible: $data === 1" class="label">Pending</span>
									</td>
									<td>
										<a class="icon-edit" data-bind="visible: $data.assignee === $root.currentUserID(), click: $root.editTask"  href="#editForm" data-toggle="modal"></a>
										<input type="hidden" data-bind="value: $data.id">
									</td>                                     
								</tr>                       
							</tbody>
						</table><hr>
					</div>
				</div>
				<!-- /ko -->
			</div>
			<!-- Participants -->
			<div id="participants">
				<div class="page-header">
					<h4>Participants
						<small>(<span data-bind="text: participants().length"></span>)</small>
                        <button class="btn btn-mini btn-primary pull-right" type="button" data-bind="visible: own" class="btn btn-primary" href="#partForm" data-toggle="modal">Add New</button>
					</h4>
				</div>
				<ul data-bind="foreach: participants">
					<a data-bind="attr: { href: '#users/' + id }">
						<img width="96" height="96" data-bind="attr: { src: avatar }, bootstrapPopover: { html: true, title: name, content: email }" class="img-circle">
					</a>
				</ul>
			</div>
		</div>
	</div>
</div>
<div id="partForm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="New Participants" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h3 id="participantAddLabel">New Participants</h3>
    </div>
    <div class="modal-body">
        <div class="span5">
            <form method="post" action="ss/controller.php">
                <input type="text" name="email" id="email" class="span5" placeholder="Email">
                <div class="alert hide" id="alert">
                    <strong id="message"></strong>
                </div>
                <div class="clearfix"></div>
            </form>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true" id="close">Close</button>
        <button class="btn btn-primary" id="add">Add</button>
    </div>
</div>
<div id="taskForm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="New Task" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h3 id="taskAddLabel">New Task</h3>
    </div>
    <div class="modal-body">
        <div class="span5">
            <form method="post" action="ss/controller.php">
                <input type="text" name="title" id="tasktitle" class="span5" placeholder="Title">
                <textarea name="description" id="taskdescription" class="span5" placeholder="Description (optional)"></textarea>
                <input type="date" name="startDate" id="taskstartDate" class="span5" placeholder="Start Date (optional)">
                <input type="date" name="endDate" id="taskendDate" class="span5" placeholder="End Date (optional)">
                <select name="taskstatus" id="taskstatus">
				  <option value="1">Pending</option>
				  <option value="2">In Progress</option>
				  <option value="3">In Testing</option>
				  <option value="4">Done</option>
				</select> 
                <div class="alert hide" id="taskalert">
                    <strong id="taskmessage"></strong>
                </div>
                <div class="clearfix"></div>
            </form>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true" id="closetask">Close</button>
        <button class="btn btn-primary" id="addtask">Add</button>
    </div>
</div>
<div id="editForm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="New Task" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h3 id="editAddLabel">Edit Task</h3>
    </div>
    <div class="modal-body">
        <div class="span5">
            <form method="post" action="ss/controller.php">
                <input type="text" name="title" id="edittitle" class="span5" placeholder="Title">
                <textarea name="description" id="editdescription" class="span5" placeholder="Description (optional)"></textarea>
                <input type="date" name="startDate" id="editstartDate" class="span5" placeholder="Start Date (optional)">
                <input type="date" name="endDate" id="editendDate" class="span5" placeholder="End Date (optional)">
                <select name="taskstatus" id="editstatus">
				  <option value="1">Pending</option>
				  <option value="2">In Progress</option>
				  <option value="3">In Testing</option>
				  <option value="4">Done</option>
				</select> 
                <div class="alert hide" id="editalert">
                    <strong id="editmessage"></strong>
                </div>
                <div class="clearfix"></div>
            </form>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true" id="closeedit">Close</button>
        <button class="btn btn-primary" id="addedit">Edit</button>
    </div>
</div>
<script src="js/models.js"></script>
<script src="js/customBindingHandlers.js"></script>
<script src="js/projectInfoViewModel.js"></script>
<script src="js/projectTasksViewModel.js"></script>
<script src="js/addProjectForm.js"></script>
<script src="js/addTaskForm.js"></script>
<script>
(function() {
	var slash = location.hash.indexOf('/');
		pid = location.hash.substring(slash + 1);

	ko.applyBindings(
		new ProjectInfoViewModel(pid),
		document.getElementById('projectInfo'));

	ko.applyBindings(
		new ProjectTasksViewModel(pid),
		document.getElementById('projectTasks'));	
}());
</script>